<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <div class="left">
        <span class="title">账号管理</span>
        <el-input v-model="query.keyword" placeholder="手机号或名称" style="width: 200px;margin-left: 10px;"
                  size="mini" clearable></el-input>
      </div>
      <el-button type="primary" size="small" @click="doModify('add')"
                 v-if="hasPerm('system:account:edit')">添加账号
      </el-button>
    </div>
    <div class="common-bot" v-if="hasPerm('system:account:list')">
      <el-table :data="tableData" style="width: 100%">
        <!--        <el-table-column prop="id" label="ID" width="150">-->
        <!--          <template slot-scope="scope">-->
        <!--            <Briefly :value="''+scope.row.id" :length="10"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="mobile" label="手机号/邮箱/名称">
          <template slot-scope="scope">
            <span>{{ scope.row.mobile }}</span><br>
            <span>{{ scope.row.name }}</span><br>
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loginRegion" label="区域"></el-table-column>
        <el-table-column prop="loginIp" label="IP"></el-table-column>
        <el-table-column prop="clientKey" label="识别码" width="150"></el-table-column>
        <el-table-column prop="gender" label="性别" width="100">
          <template slot-scope="scope">
            <span>{{ gender[scope.row.gender] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="过期时间" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.expiredTime">{{ scope.row.expiredTime | parseTime }}</span>
            <div v-else>--</div>
            <el-link v-if="hasPerm('system:account:renewal')" type="primary" @click.stop="renewalAccount(scope.row)" size="mini">续期</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime | parseTime }}<br>
            {{ scope.row.loginTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="roleGroups" label="权限组" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.roleGroup">
              {{ scope.row.roleGroup.name }}
            </template>
            <template v-else>
              <div>---</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="enable"
          label="启用" width="60"
          v-if="hasPerm('system:account:enable')"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              @change="doModify('enable', scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作" width="100"
          v-if="hasPerm('system:account:edit', 'system:account:del')"
        >
          <template slot-scope="scope">
            <span
              class="span-modify edit"
              v-if="hasPerm('system:account:edit')"
              @click.stop="doModify('edit', scope.row)"
            >编辑</span
            >
            <span
              class="span-modify del"
              v-if="hasPerm('system:account:del')"
              @click.stop="doModify('del', scope.row)"
            >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.page"
          :page-size="query.limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <Modify
      @close="close"
      :id="modifyId"
      :type="modifyType"
      :showModify="showModify"
    />
    <el-dialog
      title="账号续期"
      :visible.sync="renewalDialogVisible"
      width="30%" top="35vh">
      <el-form :model="renewalForm" label-position="right" label-width="100px" size="mini">
        <el-form-item label="账号类型">
          <el-select v-model="renewalForm.priceId" placeholder="请选择">
            <el-option
              v-for="item in prices"
              :key="item.id"
              :label="`${item.name} 价格：${formatMoney(item.price)}`"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="renewalForm.money"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="renewalForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renewalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="renewalFormSubmit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import Modify from "./modify.vue";
import {fen2yuan, yuan2fen} from "@/utils";

export default {
  components: {Briefly, Modify},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      modifyType: "add",
      modifyId: "",
      showModify: false,
      //
      showPage: false,
      tableData: [],
      query: {
        enable: 0,
        keyword: '',
        limit: 10,
        page: 1,
        roleGroupId: 0,
      },
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      prices: [],
      renewalDialogVisible: false,
      renewalForm: {},
      current: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        shortcuts: [
          {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一月后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一年后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 365);
              picker.$emit('pick', date);
            }
          }
        ]
      },
    };
  },
  watch: {
    'query.keyword'(val) {
      this.getData();
    },
    'query.page'(val) {
      this.getData();
      this.setStateData(val);
    },
    'query.limit'(val) {
      this.getData();
    },
  },
  methods: {
    formatMoney(money) {
      return fen2yuan(money)
    },
    renewalFormSubmit() {
      Api.manager.renewal({
        ...this.renewalForm,
        money: yuan2fen(this.renewalForm.money)
      }).then(res => {
        this.renewalDialogVisible = false
        this.$message.success("操作成功");
        this.getData();
      })
    },
    renewalAccount(manager) {
      this.renewalForm = {
        targetId: null,
        priceId: null,
        money: null,
        remark: null,
      }
      this.current = manager
      this.renewalForm.targetId = manager.id
      this.renewalDialogVisible = true
    },
    close() {
      this.showModify = false;
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.query.limit = val;
    },
    handleCurrentChange(val) {
      this.query.page = val;
    },
    doModify(type, item = null) {
      switch (type) {
        case "add":
          this.modifyId = "";
          this.modifyType = type;
          this.showModify = true;
          break;
        case "edit":
          this.modifyId = item.id;
          this.modifyType = type;
          this.showModify = true;
          break;
        case "enable":
          Api.manager
            .enable({
              targetId: item.id,
              yes: item.enable ? true : false,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.getData();
              }
            })
            .catch((e) => this.getData());
          break;
        case "del":
          this.$confirm("确认此操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              Api.manager.del({targetIds: [item.id]}).then((res) => {
                if (res.code == 200) {
                  this.$message.success("操作成功");
                  this.getData();
                }
              });
            })
            .catch((e) => this.getData());
          break;
      }
    },
    toModify(type) {
      this.$router.push({name: "managerModify", query: {type}});
    },
    getData() {
      Api.manager
        .list({
          ...this.query,
          page: this.query.page - 1
        }).then((res) => {
        this.tableData = res.data;
        this.totalElement = res.total;
        this.showPage = true;
      });
    },
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.query.page = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
    Api.vipPrice.all().then(res => {
      this.prices = res.data
    })
  },
};
</script>

<style lang="scss" scoped></style>
